<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :md="16">
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>项目基础信息</span>
            <el-button class="float-right" type="primary" plain size="small"
              >招标详情
            </el-button>
          </div>

          <el-form :model="form" label-width="100px">
            <el-row :gutter="12">
              <el-col :md="12">
                <el-form-item label="招标名称">{{ form.title }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标编号">{{ form.code }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="采购单位">{{ form.company }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标方式">{{ form.way }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>评标明细</span>
            <el-button
              class="float-right"
              v-show="show"
              type="primary"
              plain
              size="mini"
              >查看报价明细
            </el-button>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="衡水液力胶管有限公司" name="1"> </el-tab-pane>
            <el-tab-pane label="衡水旭丰管道装备有限公司" name="2">
            </el-tab-pane>
          </el-tabs>
          <el-table
            :data="lists"
            border
            highlight-current-row
            class="mb-20"
            :span-method="objectSpanMethod"
            show-summary
            :summary-method="getSummaries"
            v-show="!show"
          >
            <el-table-column
              label="评标规则(技术)"
              prop="name"
              align="center"
            ></el-table-column>
            <el-table-column label="评标规则内容" prop="content" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.content"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="分值" prop="score" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.score"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="权重" prop="serious" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.serious"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="评分" prop="total" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.total"></el-input>
              </template>
            </el-table-column>
          </el-table>

          <el-table
            v-show="show"
            :data="lists1"
            border
            highlight-current-row
            show-summary
            :summary-method="getSummaries"
            :span-method="objectSpanMethod1"
            class="mb-20"
          >
            <el-table-column label="评标规则(商务)" prop="name" align="center">
            </el-table-column>
            <el-table-column label="评标规则内容" prop="content" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.content"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="分值" prop="score" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.score"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="权重" prop="serious" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.serious"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="评分" prop="total" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.total"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <el-card shadow="never" class="mb-20" v-show="show">
            <div slot="header">
              <span>评标意见</span>
            </div>
            <el-input
              type="textarea"
              v-model="opinion"
              placeholder="第一次评标，给个好评。谢谢！"
            ></el-input>
          </el-card>
          <div class="text-center">
            <el-button type="primary" v-show="show">提交评分</el-button>
            <el-button type="primary" plain @click="prev" v-if="show"
              >修改技术评分</el-button
            >
            <el-button type="primary" @click="next" v-else>商务评分</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :md="8">
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标流程记录</span>
          </div>
          <div style="height: 200px">
            <el-steps direction="vertical" :active="1">
              <el-step
                title="签到"
                description="确认签到   2020-12-12  12:00:00"
              ></el-step>
              <el-step title="评标">
                <template slot="title">
                  <router-link to="/bidding/evaluation_hall_expert">
                    评标
                  </router-link>
                </template>
              </el-step>
              <el-step title="拟定结果">
                <template slot="title">
                  <router-link to="/bidding/evaluation_result_expert">
                    拟定结果
                  </router-link>
                </template>
              </el-step>
            </el-steps>
          </div>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>在线沟通</span>
            <el-button type="primary" plain size="small" class="float-right"
              >私聊
            </el-button>
          </div>
          <ul class="list mb-20" style="list-style-type: none; padding: 0">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">供应商{{ 1 }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
          <el-input
            type="textarea"
            v-model="message"
            placeholder="回车发送信息"
          ></el-input>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>澄清公告</span>
            <el-button type="primary" plain class="float-right" size="small"
              >澄清/答疑
            </el-button>
          </div>
          <ul class="list">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">澄清名称{{ i }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      activeName: "1",
      show: false,
      expert: [],
      lists: [
        {
          name: "技术",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "技术",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
      ],
      lists1: [
        {
          name: "质保期",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "质保期",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "价格",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "价格",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "付款条件",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "付款条件",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "交期",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
        {
          name: "交期",
          content: "",
          score: "",
          serious: "",
          total: "",
        },
      ],
      opinion: "",
      message: "",
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 3) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 3) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    prev() {
      this.show = false;
    },
    next() {
      this.show = true;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "评分汇总";
          return;
        }
      });

      return sums;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #e3e3e3;
  min-height: 100vh;
}
</style>
